import { Breadcrumb, Row, Col } from 'antd';
import React from 'react';
import { connect } from 'dva';
import _ from 'lodash';
import RightContent from './RightContent';
import styles from './index.less';

const GlobalHeader = props => {
  // const { theme, layout } = props;
  // let className = styles.right;

  // if (theme === 'dark' && layout === 'topmenu') {
  //   className = `${styles.right}  ${styles.dark}`;
  // }
  const { location, route } = props;
  const level1 = location.pathname.split('/')[1];
  const level2 = location.pathname.split('/')[2];
  let level2Name = '';
  let level1Name = '';
  if (level1 || level2) {
    level1Name = _.filter(route.routes, { path: `/${level1}` });
    if (level1Name.length > 0) {
      level2Name = _.filter(level1Name[0].routes, { path: `/${level1}/${level2}` });
    }
  }

  return (
    <div className={styles.header}>
      <Row type="flex" align="middle">
        <Col span={12}>
          <div className={styles.headerBreadcrumb}>
            <Breadcrumb>
              {level1Name.length ? (
                <Breadcrumb.Item key={2}>{level1Name[0].name}</Breadcrumb.Item>
              ) : null}
              {level2Name.length ? (
                <Breadcrumb.Item key={2}>{level2Name[0].name}</Breadcrumb.Item>
              ) : null}
            </Breadcrumb>
          </div>
        </Col>
        <Col span={12}>
          <RightContent />
        </Col>
      </Row>
    </div>
  );
};

export default connect(({ settings }) => ({
  theme: settings.navTheme,
  layout: settings.layout,
}))(GlobalHeader);
